<template>
  <view class="container">
    <view class="bg-sear">
      <view class="scrolltop">
        <view
            class="section"
            @click="toSearchPage"
        >
          <image
              src="@/static/images/icon/search.png"
              class="search-img"
          />
          <text class="placeholder">
            搜索
          </text>
        </view>
      </view>
    </view>

    <view class="content">
      <!-- swiper -->
      <swiper
          :autoplay="autoplay"
          :indicator-color="indicatorColor"
          :interval="interval"
          :duration="duration"
          :indicator-active-color="indicatorActiveColor + ' '"
          :circular="true"
          class="pic-swiper"
          indicator-dots
          previous-margin="20rpx"
          next-margin="20rpx"
      >
        <block
            v-for="(item, index) in indexImgs"
            :key="index"
        >
          <swiper-item class="banner-item">
            <view class="img-box">
              <image
                  :src="item.imgUrl"
                  :data-prodid="item.relation"
                  class="banner"
                  @click="toProdPage"
              />
            </view>
          </swiper-item>
        </block>
      </swiper>
      <!-- end swiper -->

      <view class="cat-item">
        <view
            class="item"
            data-sts="1"
            @click="toClassifyPage"
        >
          <image src="@/static/images/icon/newProd.png" />
          <text>新品推荐</text>
        </view>
        <view
            class="item"
            data-sts="1"
            @click="toClassifyPage"
        >
          <image src="@/static/images/icon/timePrice.png" />
          <text>限时特惠</text>
        </view>
        <view
            class="item"
            data-sts="3"
            @click="toClassifyPage"
        >
          <image src="@/static/images/icon/neweveryday.png" />
          <text>每日疯抢</text>
        </view>
        <view
            class="item"
            @click="toCouponCenter"
        >
          <image src="@/static/images/icon/newprods.png" />
          <text>领优惠券</text>
        </view>
      </view>

      <!-- 消息播放 -->
      <view
          v-if="news && news.length"
          class="message-play"
          @click="onNewsPage"
      >
        <image
            src="@/static/images/icon/horn.png"
            class="hornpng"
        />
        <swiper
            :vertical="true"
            :autoplay="true"
            :circular="true"
            duration="1000"
            class="swiper-cont"
        >
          <block
              v-for="(item, index) in news"
              :key="index"
          >
            <swiper-item class="items">
              {{ item.title }}
            </swiper-item>
          </block>
        </swiper>
        <text class="arrow" />
      </view>
    </view>
    <view
        v-if="updata"
        class="updata"
    >

      <block
          v-for="(item, index) in taglist"
          :key="index"
      >
        <!-- 每日上新-->
        <view
            v-if="item.groupId===1 && item.prods && item.prods.length"
            class="up-to-date"
        >
          <view class="title">
            <text>{{ item.groupName
              }}</text>
            <view
                class="more-prod-cont"
                data-sts="0"
                :data-id="item.groupId"
                :data-title="item.groupName"
                @click="toClassifyPage"
            >
              <text class="more">
                查看更多
              </text>
            </view>
          </view>

          <view class="item-cont">
            <block
                v-for="(prod, index2) in item.prods"
                :key="index2"
            >
              <view
                  class="prod-item"
                  :data-prodid="prod.productId"
                  @click="toProdPage"
              >
                <view>
                  <view class="imagecont">
                    <img-show
                        :src="prod.pic"
                        :class-list="['prodimg']"
                    />
                  </view>
                  <view class="prod-text">
                    {{ prod.productName }}
                  </view>
                  <view class="price">
                    <text class="symbol">
                      ￥
                    </text>
                    <text class="big-num">
                      {{ wxs.parsePrice(prod.currentPrice)[0] }}
                    </text>
                    <text class="small-num">
                      .{{ wxs.parsePrice(prod.currentPrice)[1] }}
                    </text>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>

        <!-- 商城热卖-->
        <view
            v-if="item.groupId===2 && item.prods && item.prods.length"
            class="hot-sale"
        >
          <view class="title">
            <text>{{ item.groupName }}</text>
            <view
                class="more-prod-cont"
                data-sts="0"
                :data-id="item.groupId"
                :data-title="item.groupName"
                @tap="toClassifyPage"
            >
              <text class="more">
                更多
              </text>
              <text class="arrow" />
            </view>
          </view>
          <view class="hotsale-item-cont">
            <block
                v-for="(prod, index2) in item.prods"
                :key="index2"
            >
              <view
                  class="prod-items"
                  :data-prodid="prod.productId"
                  @tap="toProdPage"
              >
                <view class="hot-imagecont">
                  <img-show
                      :src="prod.pic"
                      :class-list="['hotsaleimg']"
                  />
                </view>
                <view class="hot-text">
                  <view class="hotprod-text">
                    {{ prod.productName }}
                  </view>
                  <view class="prod-info">
                    {{ prod.brief }}
                  </view>
                  <view class="prod-text-info">
                    <view class="price">
                      <text class="symbol">
                        ￥
                      </text>
                      <text class="big-num">
                        {{ wxs.parsePrice(prod.currentPrice)[0] }}
                      </text>
                      <text class="small-num">
                        .{{ wxs.parsePrice(prod.currentPrice)[1] }}
                      </text>
                    </view>
                    <image
                        src="@/static/images/tabbar/basket-sel.png"
                        class="basket-img"
                    />
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>

        <!-- 更多宝贝-->
        <view
            v-if="item.groupId===3 && item.prods && item.prods.length"
            class="more-prod"
        >
          <view class="title">
            {{ item.groupName}}
          </view>
          <view class="prod-show">
            <block
                v-for="(prod, index2) in item.prods"
                :key="index2"
            >
              <view
                  class="show-item"
                  :data-prodid="prod.productId"
                  @tap="toProdPage"
              >
                <view class="more-prod-pic">
                  <img-show
                      :src="prod.pic"
                      :class-list="['more-pic']"
                  />
                </view>
                <view class="prod-text-right">
                  <view class="prod-text more">
                    {{ prod.productName }}
                  </view>
                  <view class="prod-info">
                    {{ prod.brief }}
                  </view>
                  <view class="b-cart">
                    <view class="price">
                      <text class="symbol">
                        ￥
                      </text>
                      <text class="big-num">
                        {{ wxs.parsePrice(prod.currentPrice)[0] }}
                      </text>
                      <text class="small-num">
                        .{{ wxs.parsePrice(prod.currentPrice)[1] }}
                      </text>
                    </view>
                    <image
                        src="@/static/images/tabbar/basket-sel.png"
                        class="basket-img"
                        @tap.stop="addToCart(prod)"
                    />
                  </view>
                </view>
              </view>
            </block>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
import number from "../wxs/number";
import {carouselChart}  from "@/api/index/index"
import {news}  from "@/api/index/index"
import {goods}  from "@/api/index/index"
import {tag}  from "@/api/index/index"
export default {
  name:"index",
  data(){
    return{
      wxs:number(),
      indicatorColor:'#d1e5fb',
      indicatorActiveColor:'#1b7dec',
      autoplay:true,
      interval:2000,
      duration:1000,
      indexImgs:[],
      seq:0,
      news:[],
      taglist:[],
      updata:true
    }
  },
  // 在test.vue页面接受参数
  onLoad(){
    this.getAllData();
  },
  methods:{
    getAllData(){
      /* http.getCartCount()*/// 重新计算购物车总数量
      this.getIndexImgs()
      this.getNoticeList()
      this.getTag()
    },
    toProdPage(e){
      const productId = e.currentTarget.dataset.prodid
      if (productId) {
        uni.navigateTo({
          url: '/pages/index/prod?productId=' + productId
        })
      }
    },
    addToCart(item){
      uni.showLoading({
        mask: true
      })
      /*  http.request({
          url: '/prod/prodInfo',
          method: 'GET',
          data: {
            prodId: item.prodId
          }
        })
          .then(({ data }) => {
            http.request({
              url: '/p/shopCart/changeItem',
              method: 'POST',
              data: {
                basketId: 0,
                count: 1,
                prodId: data.prodId,
                shopId: data.shopId,
                skuId: data.skuList[0].skuId
              }
            })
              .then(() => {
                uni.hideLoading()
                http.getCartCount() // 重新计算购物车总数量
                uni.showToast({
                  title: '加入购物车成功',
                  icon: 'none'
                })
              })
          })*/
    },
    toCouponCenter(){
      uni.showToast({
        icon: 'none',
        title: '该功能未开源'
      })
    },
    toSearchPage(){
      uni.navigateTo({
        url: '/pages/index/search'
      })
    },
    toClassifyPage(e){
      let url = '/pages/index/prodClassify?sts=' + e.currentTarget.dataset.sts
      const id = e.currentTarget.dataset.id
      const title = e.currentTarget.dataset.title

      if (id) {
        url += '&tagid=' + id + '&title=' + title
      }

      uni.navigateTo({
        url
      })
    },
    onNewsPage(){
      uni.navigateTo({
        url: '/pages/index/recentNews'
      })
    },
    getIndexImgs(){
      console.log("轮播图")
      /*http.request({
         url: '/indexImgs',
         method: 'GET',
         data: {}
       })*/
      carouselChart()
          .then(({ rows }) => {
            console.log(rows);
            this.indexImgs=rows
            console.log(this.indexImgs)
            /* this.seq= data*/
          })
    },
    getNoticeList(){
      console.log("新闻")
      // 加载公告
      /* http.request({
         url: '/shop/notice/topNoticeList',
         method: 'GET',
         data: {}
       })
         news
         .then(({ data }) => {
           news.value = data
         })*/
      news().then(({rows}) => {
        console.log(rows);
        this.news= rows
      })
    },
    getTag(){
      console.log("getTag")
      /* http.request({
         url: '/prod/tag/prodTagList',
         method: 'GET',
         data: {}
       })
         .then(({ data }) => {
           taglist.value = data
           for (let i = 0; i < data.length; i++) {
             updata.value = false
             updata.value = true
             getTagProd(data[i].id, i)
           }
         })*/
      tag().then(({ rows }) => {
        console.log(rows);
        this.taglist= rows
        for (let i = 0; i < rows.length; i++) {
          this.updata= false
          this.updata= true
          this.getTagProd(rows[i].groupId, i)
        }
      })
    },
    getTagProd(groupId, index){
      /* http.request({
         url: '/prod/prodListByTagId',
         method: 'GET',
         data: {
           tagId: id,
           size: 6
         }
       })*/
      goods(groupId).then(({ rows }) => {
        this.updata= false
        this.updata= true
        const taglistParam =this.taglist
        taglistParam[index].prods =rows
        this.taglist= taglistParam
        console.log(this.taglist);
        let num=this.taglist.filter(item=>item.prods.filter(item=>item.status==0))
        console.log(num);
        this.taglist.forEach(t=>{
          const activeItems =t.prods.filter(item => item.status ==0);
         activeItems.forEach(r=>{
            const pic=r.pic;
            const num=pic.split(",");
            r.pic=num[0]
          })
          t.prods=activeItems;
        })
      })
      const taglistParam = this.taglist;
      this.taglist=taglistParam
      console.log(taglistParam);
      console.log(this.taglist);

    }
  },
  onLoad(){
    this.getAllData()
  },
  onShow(){
    // #ifdef MP-WEIXIN
    uni.getSetting({
      success (res) {
        if (!res.authSetting['scope.userInfo']) {
          uni.navigateTo({
            url: '/pages/login/login'
          })
        }
      }
    })
    // #endif
    /* http.getCartCount()*/ // 重新计算购物车总数量
  },
  onPullDownRefresh() {
    // 模拟加载
    setTimeout(() => {
      this.getAllData()
      uni.stopPullDownRefresh() // 停止下拉刷新
    }, 100)
  }
}
</script>

<style lang="scss">
.container {
  background: #f7f7f7;
  height: auto;
}

/* 轮播图及搜索框 */
swiper {
  width: 100%;
  height: 350rpx;
  overflow: hidden;
}
swiper.pic-swiper {
  margin-top: 75rpx;
  padding: 10rpx 0;
  background: #fff;
  height: 422rpx;
  .img-box {
    font-size: 0;
  }
  .banner {
    position: absolute;
    width: 690rpx;
    margin: 0 10rpx;
    height: 402rpx;
    border-radius: 8rpx;
    display: inline-block;
    box-shadow: 0 4px 10px 0 rgba(83, 83, 83, 0.288);
  }
}
swiper-item {
  font-size: 26rpx;
  font-weight: bold;
}
.wx-swiper-dots {
  margin-bottom: 15rpx;
}
.banner-item {
  box-sizing: border-box;
}
.container {
  .bg-sear {
    position: fixed;
    z-index: 999;
    width: 100%;
    line-height: 56rpx;
    background: #fff;
    padding: 20rpx 0;
    text-align: center;
    top: 0;
  }
}
.bg-sear {
  .section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60rpx;
    background: #fff;
    z-index: 1;
    border-radius: 50rpx;
    width: 92%;
    margin: auto;
    left: 4%;
    background: #f7f7f7;
    .placeholder {
      display: block;
      font-size: 24rpx;
      color: #999;
    }
    .search-img {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }
  }
}

/* 分类栏目 */
.content {
  background: #fff;
}
.cat-item {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding-top: 20rpx;
  padding-bottom: 30rpx;
  .item {
    text-align: center;
    width: 25%;
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
    image {
      width: 75rpx;
      height: 75rpx;
    }
    text {
      font-size: 26rpx;
      margin-top: 20rpx;
    }
  }
}

/* 消息播放 */
.message-play {
  position: relative;
  height: 90rpx;
  background: #fff;
  margin: auto;
  padding: 0 60rpx 0 100rpx;
  box-sizing: border-box;
  box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05);
  border: 2rpx solid #fafafa;
  .hornpng {
    width: 77rpx;
    height: 36rpx;
    position: absolute;
    left: 20rpx;
    top: 27rpx;
    margin-right: 8rpx;
  }
  .swiper-cont {
    height: 90rpx;
    line-height: 90rpx;
    .items {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      text-align: left;
    }
  }
}
.arrow {
  width: 15rpx;
  height: 15rpx;
  border-top: 3rpx solid #686868;
  border-right: 3rpx solid #686868;
  transform: rotate(45deg);
  position: absolute;
  right: 30rpx;
  top: 34rpx;
}

/* 每日上新 */
.title {
  position: relative;
  height: 64rpx;
  line-height: 64rpx;
  font-size: 32rpx;
  padding: 40rpx 0 10rpx 30rpx;
  color: #333;
  background: #fff;
  .more-prod-cont {
    color: #999;
    display: inline-block;
    text-align: right;
    .more {
      position: absolute;
      right: 30rpx;
      top: 48rpx;
      color: #666;
      font-size: 24rpx;
      padding: 0 20rpx;
      height: 44rpx;
      line-height: 44rpx;
    }
    .arrow {
      top: 58rpx;
      right: 30rpx;
      border-top: 2rpx solid #666;
      border-right: 2rpx solid #666;
    }
  }
}
.up-to-date {
  .title {
    color: #fff;
    background: none;
    .more-prod-cont {
      .more {
        position: absolute;
        right: 30rpx;
        top: 48rpx;
        color: #fff;
        font-size: 24rpx;
        background: #65addf;
        border-radius: 30rpx;
        padding: 0 30rpx;
        height: 44rpx;
        line-height: 44rpx;
      }
    }
  }
  background-image: url("");
  background-position: top;
  background-size: 100% 332rpx;
  background-repeat: no-repeat;
  background-color: #fff;
  .item-cont {
    margin: auto;
    height: auto;
    width: calc(100% - 40rpx);
    display: flex;
    flex-wrap: wrap;
    &::before {
      clear: both;
      height: 0;
      overflow: hidden;
    }
    .prod-item {
      border-radius: 10rpx;
      width: 220rpx;
      background: #fff;
      display: inline-block;
      margin: 0 8rpx;
      margin-bottom: 20rpx;
      box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
      .imagecont {
        width: 100%;
        font-size: 0;
        width: 220rpx;
        height: 220rpx;
        .prodimg {
          width: 220rpx;
          height: 220rpx;
          vertical-align: middle;
          border-top-left-radius: 10rpx;
          border-top-right-radius: 10rpx;
          font-size: 0;
        }
      }
      .prod-text {
        font-size: 28rpx;
        overflow: hidden;
        margin: 10rpx 0;
        height: 75rpx;
        display: -webkit-box;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #000;
        padding: 0 10rpx;
      }
      .prod-price {
        font-size: 25rpx;
        color: #eb2444;
        font-family: Arial;
        padding: 0 10rpx;
      }
    }
  }
}
.hotsale-item-cont {
  padding-bottom: 20rpx;
  background: #fff;
}
.more.prod-price {
  position: absolute;
  bottom: 20rpx;
}

/* 商城热卖 */
.hot-sale {
  .prod-items {
    width: 345rpx;
    display: inline-block;
    background: #fff;
    padding-bottom: 20rpx;
    box-sizing: border-box;
    box-shadow: 0rpx 6rpx 8rpx rgba(58,134,185,0.2);
    &:nth-child(2n-1) {
      margin: 20rpx 10rpx 10rpx 20rpx;
    }
    &:nth-child(2n) {
      margin: 20rpx 20rpx 10rpx 10rpx;
    }
  }
}
.prod-items {
  .hot-imagecont {
    width: 341rpx;
    height: 341rpx;
    .hotsaleimg {
      width: 341rpx;
      height: 341rpx;
    }
    font-size: 0;
    text-align: center;
  }
  .hot-text {
    .hotprod-text {
      font-size: 28rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    margin-top: 20rpx;
    padding: 0 10rpx;
    .prod-info {
      font-size: 22rpx;
      color: #999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .prod-text-info {
      position: relative;
      height: 70rpx;
      line-height: 70rpx;
      font-family: Arial;
      .hotprod-price {
        display: inline;
        font-size: 26rpx;
        color: #eb2444;
      }
      .basket-img {
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: 0;
        bottom: 7rpx;
        padding: 8rpx;
      }
    }
  }
}
.more-prod {
  .prod-text-right {
    .prod-info {
      font-size: 22rpx;
      color: #999;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.singal-price {
  display: inline;
  font-size: 20rpx;
  text-decoration: line-through;
  color: #777;
  margin-left: 15rpx;
}

/* 更多宝贝 */
.more-prod {
  background: #fff;
  .prod-show {
    .show-item {
      .more-prod-pic {
        width: 250rpx;
        height: 250rpx;
        .more-pic {
          max-width: 100%;
          max-height: 100%;
        }
      }
      position: relative;
      display: flex;
      padding: 20rpx;
      justify-content: flex-start;
      border-top: 2rpx solid #f4f4f4;
      .prod-text-right {
        margin-left: 30rpx;
        width: 72%;
        padding-bottom: 10rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .go-to-buy {
          font-size: 26rpx;
          background: #fff2f5;
          color: #eb2444;
          border-radius: 50rpx;
          text-align: center;
          padding: 12rpx 20rpx;
          position: absolute;
          right: 20rpx;
          bottom: 20rpx;
        }
        .prod-text.more {
          margin: 0;
          font-size: 28rpx;
          overflow: hidden;
          margin-bottom: 20rpx;
          display: -webkit-box;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .more.prod-price {
          font-size: 28rpx;
          font-family: arial;
        }
      }
    }
  }
}
.b-cart {
  margin-top: 30rpx;
  .basket-img {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 46rpx;
    padding: 8rpx;
  }
}
.up-to-date .title[data-v-2a183b29]{
  margin-bottom: 20px;
}
</style>
